<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>4_createRef</title>
</head>

<body>
	<!-- 准备好一个“容器” -->
	<div id="test"></div>

	<!-- 引入react核心库 -->
	<script type="text/javascript" src="../js/react.development.js"></script>
	<!-- 引入react-dom，用于支持react操作DOM -->
	<script type="text/javascript" src="../js/react-dom.development.js"></script>
	<!-- 引入babel，用于将jsx转为js -->
	<script type="text/javascript" src="../js/babel.min.js"></script>

	<script type="text/babel">
		//创建组件
		class Demo extends React.Component {
			/* 
				React.createRef调用后可以返回一个容器，该容器可以存储被ref所标识的节点,该容器是“专人专用”的
				当一个ref通过render放入一个元素中，一个对节点的引用可以通过ref的current属性得到；
				 ref的值根据节点类型的不同而不同：

				当ref属性用于HTML元素，在构造器中通过React.createRef()函数创建的ref接收底层DOM元素作为它的current属性；
				当ref属性用于传统的类组件，ref对象接收挂载好的组件实例作为它的current；
				你不能将ref属性用于函数式组件上，因为他们并没有实例（instance）！但是，你可以在函数式组件中使用ref属性，就像你引用DOM元素和类组件一样
				React将会将会在组件挂载时将DOM元素分配给current属性，并且在组件被卸载时，将current属性重置为null。
				ref将会在componentDidMount和componentDidUpdate生命周期钩子前被更新
			 */
			myRef = React.createRef()
			myRef2 = React.createRef()
			//展示左侧输入框的数据
			showData = () => {
				alert(this.myRef.current.value);
			}
			//展示右侧输入框的数据
			showData2 = () => {
				alert(this.myRef2.current.value);
			}
			render() {
				return (
					<div>
						<input ref={this.myRef} type="text" placeholder="点击按钮提示数据" />&nbsp;
						<button onClick={this.showData}>点我提示左侧的数据</button>&nbsp;
						<input onBlur={this.showData2} ref={this.myRef2} type="text" placeholder="失去焦点提示数据" />&nbsp;
					</div>
				)
			}
		}
		function CustomTextInput(props) {
			// textInput 必须被声明在这里——ref才能适用于它
			let textInput = React.createRef();

			function handleClick() {
				textInput.current.focus();
			}

			return (
				<div>
					<input
						type="text"
						ref={textInput} />

					<input
						type="button"
						value="Focus the text input"
						onClick={handleClick}
					/>
				</div>
			);
		}
		//渲染组件到页面
		ReactDOM.render(<Demo a="1" b="2" />, document.getElementById('test'))
	</script>
</body>

</html>